<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '新增用户' : '修改用户'" @close="onClose">
		<el-form :model="data.form" :rules="rules" ref="ruleFormRef">
			<el-form-item label="用户名" :label-width="formLabelWidth" prop="role_name"><el-input v-model="data.form.role_name" placeholder="用户名" /></el-form-item>
			<el-form-item label="用户代码" :label-width="formLabelWidth" prop="user_code">
				<el-input :disabled="!isAdd" v-model="data.form.user_code" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item label="账号" :label-width="formLabelWidth" prop="user_name">
				<el-input :disabled="!isAdd" v-model="data.form.user_name" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item label="密码" :label-width="formLabelWidth" prop="password"><el-input v-model="data.form.password" placeholder="密码"></el-input></el-form-item>
			<el-form-item label="手机" :label-width="formLabelWidth" prop="phone"><el-input v-model="data.form.phone" placeholder="手机"></el-input></el-form-item>
			<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email"><el-input v-model="data.form.email" placeholder="邮箱"></el-input></el-form-item>
			<el-form-item label="qq" :label-width="formLabelWidth" prop="qq"><el-input v-model="data.form.qq" placeholder="QQ"></el-input></el-form-item>
			<el-form-item label="真实姓名" :label-width="formLabelWidth" prop="real_name"><el-input v-model="data.form.real_name" placeholder="真实姓名"></el-input></el-form-item>
			<el-form-item label="note" :label-width="formLabelWidth" prop="note"><el-input v-model="data.form.note" placeholder="备注"></el-input></el-form-item>
			<el-form-item label="角色" prop="role_id" :label-width="formLabelWidth">
				<el-select v-model="data.form.role_id" placeholder="角色">
					<el-option label="管理用户" :value="1"></el-option>
					<el-option label="普通用户" :value="2"></el-option>
					<el-option label="游客" :value="3"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<!-- role_name,user_code,user_name,password,phone,email,qq,note,role_id -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import md5 from 'js-md5';
const { proxy } = getCurrentInstance();
import { reactive, ref,getCurrentInstance} from 'vue';
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['closeDialog'])
const dialogVisible = ref(false);
const formLabelWidth = '80px';
const data = reactive({
  form:{
	  role_id:3
  }
})

const isAdd = ref(true);
const ruleFormRef = ref<FormInstance>()

const rules = {
	user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的手机号', trigger: 'blur' }
	],
	nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
	role_id: [{ required: true, message: '请选择角色', trigger: 'blur' }],
	role_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	qq: [{ required: true, message: '请输入qq', trigger: 'blur' }, { pattern: /^[1-9][0-9]{4,9}$/gim, message: '请输入正确的QQ号', trigger: 'blur' }]
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		let bool = !!data.form.id
		let url = bool?'/users/update':'/users/add'
		data.form.passcode = md5(data.form.password);
      proxy
      	.$post(url,{...data.form})
      	.then(res => {
      		if(res.code===200){
				ElMessage({
				  message: bool?'修改成功':'添加成功',
				  type: 'success',
				})
				onClose(true)
			}
      	});
    } else {
      console.log('error submit!', fields)
    }
  })
}
defineExpose({ open });
function open(row) {
	if(row){
		data.form = Object.assign({},row)
		isAdd.value = false
	}
	dialogVisible.value = true;
}
function onClose(bool){
	emits('closeDialog',bool)
	dialogVisible.value = false
}
</script>

<style scoped lang="less"></style>
